/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,   //判断当前运行的系统
    Navigator
} from 'react-native';

/**---------导入外部的组件类----------**/
import TabNavigator from 'react-native-tab-navigator';
var DCHome = require('../Home/DCHome');
var DCMine = require('../Mine/DCMine');
var DCMore = require('../More/DCMore');
var DCShop = require('../Shop/DCShop');

var DCMain = React.createClass({
    //初始化函数(变量是可以改变的,充当状态机的角色)
    getInitialState(){
        return{
            selectedTab: "home" //默认选择第一个
        }
    },

    render() {
        return (
            <TabNavigator>
                {/*---首页---*/}
                {this.renderTabBarItem("首页",'icon_tabbar_homepage','icon_tabbar_homepage_selected','home','首页',DCHome)}
                {/*---商家---*/}
                {this.renderTabBarItem("商家",'icon_tabbar_merchant_normal','icon_tabbar_merchant_selected','shop','商家',DCShop)}
                {/*---我的---*/}
                {this.renderTabBarItem("我的",'icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',DCMine)}
                {/*---更多---*/}
                {this.renderTabBarItem("更多",'icon_tabbar_misc','icon_tabbar_misc_selected','more','更多',DCMore)}
            </TabNavigator>
        );
    },
    // 每一个TabBarItem
    renderTabBarItem(title, iconName, selectedIconName, selectedTab, componentName, component, badgeText){
        return(
            <TabNavigator.Item
                title={title}
                renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle} />} //图标
                renderSelectedIcon={() => <Image source={{uri: selectedIconName}} style={styles.iconStyle} />} //选中图标
                onPress={()=>{this.setState({selectedTab:selectedTab})}}
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                badgeText={badgeText}
            >
                <Navigator
                    initialRoute={{name:componentName,component:component}}
                    configureScene={()=>{return Navigator.SceneConfigs.PushFromRight;}}
                    renderScene={(route,navigator)=>{
                        let Component = route.component;
                        return <Component {...route.passProps} navigator={navigator}/>;
                    }}
                />
            </TabNavigator.Item>
        )
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    iconStyle: {
        width: Platform.OS === 'ios' ? 30 : 25,
        height: Platform.OS === 'ios' ? 30 : 25,
    },
    selectedTitleStyle: {
        color:'orange'
    }
});

//输出组件类
module.exports = DCMain;